<template>
  <div>
    <h1>App</h1>
    <p>count:{{ $store.state.count }}</p>
    <p>count:{{ count }}</p>
    <button @click="increment">累加</button>
    <button @click="incrementN({ n: 5 })">累加N</button>

    <button @click="decrement">累减</button>
    <button @click="incrementWait">过一段时间累加</button>
    <button @click="incrementWaitN(5)">过一段时间累加N</button>
  </div>
</template>

<script>
// 使用vuex中的mapState方法 来自动生成 计算属性
// 使用vuex中的mapMutations方法 来自动生成 方法

import { mapState, mapMutations, mapActions } from "vuex";
// import store from "./stores/index.js";
// console.log(store);
export default {
  name: "App",
  mounted() {
    console.log(this, "app");

    // mapState的使用 参数是一个数组，数组内是我们要去store拿的值
    // mapState返回一个对象，对象内部其实就是读取的对应的计算属性的方法
    // const result = mapState(["count", "num"]);
    // console.log(result);
    // 我们在测试的时候，直接调用count方法，因为this不是指向组件实例，所以看不出来效果
    // 我们可以强制的把count方法中的this指向改为组件实例 可以看到结果
    // console.log(result.count.apply(this));
  },
  computed: {
    // 可以使用计算属性来简化写法
    // count() {
    //   return this.$store.state.count;
    // },
    // num() {
    //   return this.$store.state.num;
    // },
    // 可以直接展开
    ...mapState(["count", "num"]),
  },

  methods: {
    /* // 累加
    increment() {
      this.$store.commit("increment");
    },
    // 累减
    decrement() {
      this.$store.commit("decrement");
    },
    // 累加传参
    incrementN(payload) {
      // 第二个参数要求传入的是一个对象
      this.$store.commit("incrementN", payload);
    }, */
    // 展开即可 参数是一个数组 数组里是所需要调用的mutations中的方法
    ...mapMutations(["increment", "decrement", "incrementN"]),

    /*  incrementWait() {
      this.$store.dispatch("incrementWait");
    },
    incrementWaitN(n) {
      this.$store.dispatch("incrementWaitN", n);
    }, */

    ...mapActions(["incrementWait", "incrementWaitN"]),
  },
};
</script>

<style></style>
